// 获取学员函数
function getStudent() {
    axios.get('/student/list').then(({ data: res }) => {
        // console.log(res);
        let str = '';
        res.data.forEach(function (item) {
            str += `<tr>
            <th scope="row">${item.id}</th>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.sex}</td>
            <td>${item.group}</td>
            <td>${item.phone}</td>
            <td>${item.salary}</td>
            <td>${item.truesalary}</td>
            <td>${item.province}${item.city}${item.county}</td>
            <td>
              <button data-id="${item.id}" type="button" class="btn btn-primary btn-sm revise">修改</button>
              <button data-id="${item.id}" type="button" class="btn btn-danger btn-sm del">删除</button>
            </td>
          </tr>`
        })
        $('tbody').html(str)
    })
}
getStudent();

// 删除事件
$('tbody').on('click', '.del', function () {
    if (confirm('确定删除吗')) {
        axios.delete('/student/delete', { params: { id: $(this).data('id') } }).then(({ data: res }) => {
            if (res.code === 0) {
                $(this).parents('tr').remove();
                toastr.success(res.message);
            }
        })
    }
})

// 省市县联动
// 获取全部的省
axios.get('/geo/province').then(({ data }) => {
    let str = `<option selected value="">--省--</option>`
    // 遍历数组
    data.forEach(item => {
        str += `<option value="${item}">${item}</option>`
    })
    $('select[name="province"]').html(str)

})
// 获取全部的市
$('select[name="province"]').on('change', function () {
    // 重置县
    $('select[name=county]').html(`<option selected value="">--县--</option>`);
    if ($(this).val() === '') {
        $('select[name="city"]').html(`<option selected value="">--市--</option>`);
        return
    }
    // 获取市
    axios.get('/geo/city', {
        params: {
            pname: $(this).val()
        }
    }).then(({ data }) => {
        let str = `<option selected value="">--市--</option>`;
        data.forEach(item => {
            str += `<option value="${item}">${item}</option>`
        })
        $('select[name="city"]').html(str);

    })
})
// 获取全部的县
$('select[name="city"]').on('change', function () {
    if ($(this).val() === '') {
        $('select[name="county"]').html(`<option selected value="">--县--</option>`);
        return;
    }
    axios.get('/geo/county', {
        params: {
            pname: $(this).parents('.col-sm-3').prev().find('select').val(),
            cname: $(this).val()
        }
    }).then(({ data }) => {
        let str = `<option selected value="">--县--</option>`
        data.forEach(item => {
            str += `<option value="${item}">${item}</option>`
        })
        $('select[name="county"]').html(str);
    })
})

// 新增和修改表单验证
function student() {
    return {
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '姓名不能为空',
                    },
                    stringLength: {
                        min: 2,
                        max: 10,
                        message: '姓名长度2~10位'
                    }
                }
            },
            age: {
                validators: {
                    notEmpty: {
                        message: '年龄不能为空',
                    },
                    greaterThan: {
                        value: 18,
                        message: '年龄不能小于18岁'
                    },
                    lessThan: {
                        value: 60,
                        message: '年龄不能超过60岁'
                    }
                }
            },
            sex: {
                validators: {
                    choice: {
                        min: 1,
                        max: 1,
                        message: '请选择性别'
                    }
                }
            },
            group: {
                validators: {
                    notEmpty: {
                        message: '组号不能为空',
                    },
                    regexp: {
                        regexp: /^\d{1,2}$/,
                        message: '请选择有效的组号'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {
                        message: '手机号不能为空',
                    },
                    regexp: {
                        regexp: /^1\d{10}$/,
                        message: '请填写有效的手机号'
                    }
                }
            },
            salary: {
                validators: {
                    notEmpty: {
                        message: '实际薪资不能为空',
                    },
                    greaterThan: {
                        value: 800,
                        message: '期望薪资不能低于800'
                    },
                    lessThan: {
                        value: 100000,
                        message: '期望薪资不能高于100000'
                    }
                }
            },
            truesalary: {
                validators: {
                    notEmpty: {
                        message: '实际薪资不能为空',
                    },
                    greaterThan: {
                        value: 800,
                        message: '实际薪资不能低于800'
                    },
                    lessThan: {
                        value: 100000,
                        message: '实际薪资不能高于100000'
                    }
                }
            },
            province: {
                validators: {
                    notEmpty: {
                        message: '省份必填',
                    },
                    stringLength: {
                        min: 2,
                        max: 10,
                        message: '省份必填'
                    }
                }
            },
            city: {
                validators: {
                    notEmpty: {
                        message: '市必填',
                    },
                    stringLength: {
                        min: 2,
                        max: 10,
                        message: '市必填'
                    }
                }
            },
            county: {
                validators: {
                    notEmpty: {
                        message: '县必填',
                    },
                    stringLength: {
                        min: 2,
                        max: 10,
                        message: '县必填'
                    }
                }
            },
        }
    }
}

$('.add-form').bootstrapValidator(student()).on('success.form.bv', function (e) {
    e.preventDefault();
    // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
    // 获取表单数据
    let data = $(this).serialize();
    axios.post('/student/add', data).then(({ data: res }) => {
        if (res.code === 0) {
            // 提示
            toastr.success(res.message);
            // 更新页面数据
            getStudent();
            // 关闭弹窗
            $('#addModal').modal('hide')
        }
    })
});

// 修改功能
$('tbody').on('click', '.revise', function () {
    let id = $(this).data('id');
    axios.get('/student/one', { params: { id } }).then(({ data: res }) => {
        // 设置输入框的默认值
        $('#updateModal input[name=name]').val(res.data.name);
        $('#updateModal input[name=age]').val(res.data.age);
        $('#updateModal input[name=phone]').val(res.data.phone);
        $('#updateModal input[name=salary]').val(res.data.salary);
        $('#updateModal input[name=truesalary]').val(res.data.truesalary);
        // 性别 利用属性选择器选中当前性别 设置选中
        $(`#updateModal input[name=sex][value=${res.data.sex}]`).prop('checked', true);
        // 组号
        let gro = res.data.group;
        $(`#updateModal select[name=group]`).children(`option[value = ${gro}]`).prop('selected', true);
        // 省
        let pvc = res.data.province;
        $(`#updateModal select[name=province]`).children(`option[value = ${pvc}]`).prop('selected', true);
        $('#updateModal select[name=city]').html(`<option value="${res.data.city}">${res.data.city}</option>`);
        $('#updateModal select[name=county]').html(`<option value="${res.data.county}">${res.data.county}</option>`);
        // id
        $('#updateModal input[name=id]').val(id);
    })
    // 弹窗显示
    $('#updateModal').modal('show');
})

$('.update-form').bootstrapValidator(student()).on('success.form.bv', function (e) {
    e.preventDefault();
    // 通过验证，这里的代码将会执行。我们将Ajax请求的代码放到这里即可
    let data = $(this).serialize();
    axios.put('/student/update', data).then(({ data: res }) => {
        if (res.code === 0) {
            // 弹窗
            toastr.success(res.message);
            // 更新页面数据
            getStudent();
            // 关闭弹窗
            $('#updateModal').modal('hide')
        }
    })
});